<template>
  <view class="wrap">
    <top-tab tabTitle="我的下载" @backClick="backClick" backColor="#5B2177"></top-tab>
		<!-- 顶部选项卡 -->
		<view class="tabs-box">
			<ms-tabs :list="list" v-model="tabActive" itemColor='#A912E7' lineColor='#A912E7' @input="matabInput"/>
		</view>
		<view class="main">
			<view class="coment-list" v-for="(item,index) in commentList" :key="item.id">
				<view class="img-box"><image class="img" :src="item.url" mode="aspectFill"></image></view>
				<view>
					<view class="title-name-ince">
						<view class="title">{{item.title}}</view>
					</view>
					<view class="item-time">{{item.time}}</view>
					<view class="item-text">{{item.text}}</view>
					<view class="item-icon-list">
						<view class="progress-box" v-if="tabActive == 0">
							<progress percent="80" show-info stroke-width="5" border-radius="2.5" font-size="12" activeColor="#6517C5"/>
						</view>
						<view class="accomplish" v-else>已完成</view>
					</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import msTabs from '@/components/ms-tabs.vue'
  export default {
		components: { topTab, msTabs },
    data() {
      return {
				tabActive: 0,
					list:[
						{ title:'进行中', value: 1 }, { title:'已完成', value: 2 },
					],
				commentList: [
					{ id: 1, time: '2016-5-05', title: '十面埋伏', name: '徐克', url: '/static/my/product_a.jpg' , text: '简介:假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司 推出的新动漫 假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司'},
					{ id: 2, time: '2012-8-05', title: '速度与激情', name: '周星驰', url: '/static/my/product_b.jpg', text: '简介:假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司 推出的新动漫 假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司'},
					{ id: 3, time: '2016-10-01', title: '一个人的武林', name: '徐克', url: '/static/my/product_c.jpg', text: '简介:假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司 推出的新动漫 假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司'},
					{ id: 4, time: '2019-12-30', title: '流浪地球', name: '吴京', url: '/static/my/product_d.jpg', text: '简介:假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司 推出的新动漫 假面骑士是日本著名动漫公司推出 的新动漫假面骑士是日本著名动漫公司'},
				]
			}
		},
  onShow() {},
  methods: {
		// tba事件
		matabInput(e) {
			this.tabActive = e
		},
		// 返回上一页
		backClick() {
			uni.switchTab({
			    url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.tabs-box{
		height: 100rpx;
		border-bottom: 1px solid #F2F2F2;
		line-height: 100rpx;
		/deep/ .tab{
			height: 96rpx !important;
			line-height: 96rpx !important;
		}
		/deep/ .tab__line {
			height: 6rpx !important;
		}
		/deep/ .tab__item {
			line-height: 96rpx !important;
		}
		/deep/ .tab__item-title {
			margin: 0 35rpx !important;
		}
	}
	.main{
		padding: 20rpx 27rpx 0 27rpx;
		.coment-list{
			width: 100%;
			height: 305rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 16rpx 0px rgba(124, 133, 236, 0.28);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			.img-box{
				width: 215rpx;
				height: 273rpx;
				margin: 0 37rpx 0 18rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.title-name-ince{
				width: 410rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					width: 70%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.name{
					padding:0 25rpx 0 7rpx;
					font-size: 24rpx;
					font-family: inpinheiti;
					font-weight: 400;
					color: #666666;
				}
			}
			.item-time{
				padding: 17rpx 0;
				font-size: 20rpx;
				font-family: inpinheiti;
				font-weight: 400;
				color: #999999;
			}
			.item-text{
				width: 410rpx;
				// height: 110rpx;
				font-size: 24rpx;
				font-family: inpinheiti;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			.item-icon-list{
				// display: flex;
				// align-items: center;
				padding: 25rpx 19rpx 0 6rpx;
				.accomplish{
					font-size: 24rpx;
					color: #EE4242;
					text-align: right;
				}
			}
		}
	}
</style>

